import { useState } from 'react'
import './app.css'
import LazyList from './components/LazyList'
import VirtualList from './components/VirtualList'
import VirtualListLimitHeight from './components/VirtualListLimitHeight'
function App() {
	const [type, setType] = useState(0)

	return (
		<div className="app">
			<p className="title">list 加载</p>
			<hr />
			<div className="btn">
				<input
					type="button"
					value="无限滚动懒加载"
					onClick={() => setType(0)}
					className={type === 0 ? 'active' : ''}
				/>
				<input
					type="button"
					value="定高虚拟滚动"
					onClick={() => setType(1)}
					className={type === 1 ? 'active' : ''}
				/>
				<input
					type="button"
					value="非定高虚拟滚动"
					onClick={() => setType(2)}
					className={type === 2 ? 'active' : ''}
				/>
			</div>
			<hr />
			<div className="content">
				{type === 0 ? <LazyList /> : null}
				{type === 1 ? <VirtualListLimitHeight /> : null}
				{type === 2 ? <VirtualList /> : null}
			</div>
		</div>
	)
}

export default App
